<template>
  <div id="container">
    <el-table
      :data="table"
      height="100%"
      border
      style="width: 100%"
    >
      <!-- <el-table-column prop="date" label="日期" width="180"> </el-table-column> -->
      <el-table-column prop="name" label="姓名" width="800"> </el-table-column>
      <!-- <el-table-column prop="gender" label="性别" width="180"> -->
      <!-- </el-table-column> -->
      <!-- <el-table-column prop="age" label="年龄" width="180"> </el-table-column> -->
      <!-- <el-table-column prop="height" label="身高" width="180"> -->
      <!-- </el-table-column> -->
      <!-- <el-table-column prop="weight" label="体重" width="180"> -->
      <!-- </el-table-column> -->
      <el-table-column prop="trainRes" label="训练结果"> </el-table-column>
    </el-table>
  </div>
</template>

  <script>
   import { mapState, mapActions } from "vuex";

export default {
  data() {
    return {
      tableData: new Array(30).fill({
        date: "2022-05-03",
        name: "测试用户",
        gender: "男",
        age: 20,
        height: 170,
        weight: 130,
        trainRes: "FEV1：30L/sec、FEV1/FVC：33%、FVC：50L/sec、PEF：20L/sec、呼吸频率：50次/min",
      }),

    };
  },
  mounted() {
    this.$store.dispatch("stroeUserTrainOrder");
  },
  computed:{
    ...mapState(
      {
        trainOrder:state=>state.userTrainOrder
      }
    ),
    table(){
      console.log(this.trainOrder.msg)
      if(this.trainOrder.msg){
        return this.trainOrder.msg.map(item=>{
          return {
            name:item[0],
            trainRes:`FEV1:${item[1]}L、FVC:${item[2]}L、FEV1/FVC:${item[3]}%、PEF:${item[4]}L/sec、呼吸频率:${item[5]}次/min`
          }
        })
      }else{
        return this.tableData
      }
    }
  }
};
</script>

<style >
  #container {
    margin-left: 100px;
  }
  .el-table{
    font-size: 20px;
  }
  .el-table .el-table__cell{
    text-align: center !important;
  }
</style>